import React, {Component, PureComponent} from 'react';
import {Card, Icon, Modal, Tabs} from 'antd';

const {TabPane} = Tabs;

//方向性图标
const directionIcons = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle',
  'down-circle', 'left-circle', 'right-circle', 'double-right', 'double-left', 'vertical-left', 'vertical-right', 'vertical-align-top', 'vertical-align-middle', 'vertical-align-bottom',
  'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'up-square', 'down-square',
  'left-square', 'right-square', 'login', 'logout', 'menu-fold', 'menu-unfold', 'border-bottom', 'border-horizontal', 'border-inner', 'border-outer', 'border-left', 'border-right',
  'border-top', 'border-verticle', 'pic-center', 'pic-left', 'pic-right', 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upright', 'fullscreen', 'fullscreen-exit'];

//提示建议性图标
const tipsIcons = ['question', 'question-circle', 'plus', 'plus-circle', 'pause', 'pause-circle', 'minus', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle', 'exclamation',
  'exclamation-circle', 'close', 'close-circle', 'close-square', 'check', 'check-circle', 'check-square', 'clock-circle', 'warning', 'issues-close', 'stop'];

//编辑类图标
const editIcons = ['edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', 'align-center', 'align-left', 'align-right', 'bg-colors', 'bold', 'italic', 'underline', 'strikethrough', 'redo',
  'undo', 'zoom-in', 'zoom-out', 'font-colors', 'font-size', 'line-height', 'dash', 'small-dash', 'sort-ascending', 'sort-descending', 'drag', 'ordered-list', 'unordered-list', 'radius-setting', 'column-width', 'column-height'];

//数据类图标
const dataIcons = ['area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders'];

//品牌和标识
const brandIcons = ['android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle',
  'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox', 'amazon', 'google', 'codepen-circle', 'alipay',
  'ant-design', 'ant-cloud', 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo', 'reddit', 'sketch'];

//网站通用图标
const commonIcons = ['account-book','alert','api','appstore','audio','bank','bell','book','bug','bulb','calculator','build','calendar','camera','car','carry-out','cloud','code','compass','contacts','container','control',
  'credit-card','crown','customer-service','dashboard','database','dislike','environment','experiment','eye-invisible','eye','file-add','file-excel','file-exclamation','file-image','file-markdown','file-pdf','file-ppt',
  'file-text','file-unknown','file-word','file-zip','file','filter','fire','flag','folder-add','folder','folder-open','frown','funnel-plot','gift','hdd','heart','home','hourglass','idcard','insurance','interaction','layout',
  'like','lock','mail','medicine-box','meh','message','mobile','money-collect','pay-circle','notification','phone','picture','play-square','printer','profile','project','pushpin','property-safety','read','reconciliation',
  'red-envelope','rest','rocket','safety-certificate','save','schedule','security-scan','setting','shop','shopping','skin','smile','sound','star','switcher','tablet','tag','tags','tool','thunderbolt','trophy','unlock','usb',
  'video-camera','wallet','apartment','audit','barcode','bars','block','border','branches','ci','cloud-download','cloud-server','cloud-sync','cloud-upload','cluster','coffee','copyright','deployment-unit','desktop','disconnect',
  'dollar','download','ellipsis','euro','exception','export','file-done','file-jpg','file-protect','file-sync','file-search','fork','gateway','global','gold','history','import','inbox','key','laptop','link','line','loading-3-quarters',
  'loading','man','menu','monitor','more','number','percentage','paper-clip','pound','poweroff','pull-request','qrcode','reload','safety','robot','scan','search','select','shake','share-alt','shopping-cart','solution','sync','table',
  'team','to-top','trademark','transaction','upload','user-add','user-delete','usergroup-add','user','usergroup-delete','wifi','woman'];

export default class DataModal extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      checkValue:''
    };
  }

  componentDidMount() {
    const {modalVisible, icon: checkValue} = this.props;
    if(modalVisible){
      if(checkValue){
        let checkKey1 = directionIcons.findIndex(o=>o===checkValue);
        let checkKey2 = tipsIcons.findIndex(o=>o===checkValue);
        let checkKey3 = editIcons.findIndex(o=>o===checkValue);
        let checkKey4 = dataIcons.findIndex(o=>o===checkValue);
        let checkKey5 = brandIcons.findIndex(o=>o===checkValue);
        let checkKey6 = commonIcons.findIndex(o=>o===checkValue);
        let checkKey = (checkKey1!==-1&&checkKey1+1)||(checkKey2!==-1&&checkKey2+100)||(checkKey3!==-1&&checkKey3+200)||(checkKey4!==-1&&checkKey4+300)||(checkKey5!==-1&&checkKey5+400)||(checkKey6!==-1&&checkKey6+500);
        this.setState({checkKey, checkValue})
      }
    }
  }

  handleCancel = () => {
    this.props.handleCancel(this.state.checkValue);
  };

  onClickCheck = (checkValue, checkKey) => {
    // console.log("onClickCheck", checkValue, checkKey);
    this.setState({checkKey, checkValue})
  };

  render() {
    const _this = this;
    const {modalVisible} = _this.props;
    const {checkKey} = _this.state;
    const gridStyleOne = {
      width: '12.5%',
      textAlign: 'center',
      borderRadius:'5px',
      padding:'17px'
    };

    const gridStyleTwo = {
      width: '12.5%',
      textAlign: 'center',
      backgroundColor:'#000000db',
      borderRadius:'5px',
      padding:'17px'
    };

    const styleOne = {
      color:'#555',
      fontSize:'24px'
    };

    const styleTwo = {
      color:'#b34a4a',
      fontSize:'24px'
    };


    const directionItems = directionIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+1)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+1) ? gridStyleTwo : gridStyleOne} key={index+1}><Icon type={val} style={(checkKey && checkKey === index+1) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    const tipsItems = tipsIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+100)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+100) ? gridStyleTwo : gridStyleOne} key={index+100}><Icon type={val} style={(checkKey && checkKey === index+100) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    const editItems = editIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+200)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+200) ? gridStyleTwo : gridStyleOne} key={index+200}><Icon type={val} style={(checkKey && checkKey === index+200) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    const dataItems = dataIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+300)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+300) ? gridStyleTwo : gridStyleOne} key={index+300}><Icon type={val} style={(checkKey && checkKey === index+300) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    const brandItems = brandIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+400)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+400) ? gridStyleTwo : gridStyleOne} key={index+400}><Icon type={val} style={(checkKey && checkKey === index+400) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    const commonItems = commonIcons.map((val, index)=>
      <div onClick={() => this.onClickCheck(val, index+500)}>
        <a>
          <Card.Grid style={(checkKey && checkKey === index+500) ? gridStyleTwo : gridStyleOne} key={index+500}><Icon type={val} style={(checkKey && checkKey === index+500) ? styleTwo : styleOne}/></Card.Grid>
        </a>
      </div>
    );

    return (
      <Modal
        destroyOnClose={true}
        visible={modalVisible}
        closable={false}
        onCancel={this.handleCancel}
        footer={null}
        width={700}
      >
        <Tabs type="card" tabPosition='top'>
          <TabPane tab="网站通用图标" key="6">
            <Card bordered={false}>
              {commonItems}
            </Card>
          </TabPane>
          <TabPane tab="编辑类图标" key="3">
            <Card bordered={false}>
              {editItems}
            </Card>
          </TabPane>
          <TabPane tab="提示建议性图标" key="2">
            <Card bordered={false}>
              {tipsItems}
            </Card>
          </TabPane>
          <TabPane tab="数据类图标" key="4">
            <Card bordered={false}>
              {dataItems}
            </Card>
          </TabPane>
          <TabPane tab="方向性图标" key="1">
            <Card bordered={false}>
              {directionItems}
            </Card>
          </TabPane>
          <TabPane tab="品牌和标识" key="5">
            <Card bordered={false}>
              {brandItems}
            </Card>
          </TabPane>
        </Tabs>
      </Modal>
    );
  }
}
